<template>
  <div class="BasicConfig">
    <el-form
      ref="formRef"
      :model="form"
      class="m7-form"
      label-width="120px"
      label-position="top"
    >
      <el-form-item style="width: 700px; position: unset">
        <span slot="label">客户查重规则</span>
        <el-checkbox-group v-model="form.customerRepeatRules">
          <el-checkbox label="name">客户姓名</el-checkbox>
          <el-checkbox label="mobile">手机号码</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item style="width: 700px; position: unset">
        <span slot="label">联系人查重规则</span>
        <el-checkbox-group v-model="form.contactRepeatRules">
          <el-checkbox label="phone">联系电话</el-checkbox>
          <el-checkbox label="email">邮箱</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item style="width: 700px">
        <span slot="label">来电自动保存</span>
        <el-checkbox v-model="form.autoSave"
          >来电自动保存客户
          <el-tooltip
            content="当来电话后，自动校验该电话是否已存在系统，如果不存在，则自动保存该号码为一个客户"
            placement="top"
          >
            <i
              style="
                font-size: 12px;
                color: #b3b9c7;
                padding-right: 6px;
                cursor: pointer;
              "
              class="V7_iconfont V7_iconV7tubiao_bangzhu-42"
            ></i>
          </el-tooltip>
        </el-checkbox>
        <br />
        <el-checkbox
          v-if="form.autoSave"
          v-model="form.autoAssign"
          style="margin-left: 10px"
          >保存客户并分配给接电话人</el-checkbox
        >
      </el-form-item>
      <el-form-item>
        <span slot="label">
          客户重复处理规则
          <el-tooltip
            content="该功能主要用于控制导入时遇到重复的客户是否更新客户信息"
            placement="top"
          >
            <i
              style="
                font-size: 12px;
                color: #b3b9c7;
                padding-right: 6px;
                cursor: pointer;
              "
              class="V7_iconfont V7_iconV7tubiao_bangzhu-42"
            ></i>
          </el-tooltip>
        </span>
        <el-radio
          v-model="form.repeatProcessingRules.updateCustomerInfo"
          :label="false"
          >不更新客户信息</el-radio
        >
        <el-radio
          v-model="form.repeatProcessingRules.updateCustomerInfo"
          :label="true"
          >更新客户信息</el-radio
        >
        <br />
        <div
          v-if="form.repeatProcessingRules.updateCustomerInfo"
          style="margin-left: 10px"
        >
          <el-radio
            v-model="form.repeatProcessingRules.isAllUpdate"
            :label="false"
            >只填空项</el-radio
          >
          <el-radio
            v-model="form.repeatProcessingRules.isAllUpdate"
            :label="true"
            >全部覆盖</el-radio
          >
          <p style="font-size: 12px; margin-bottom: 10px">
            更新客户信息权限
            <el-tooltip
              content="该功能主要用于控制导入时部分角色是否能够更新客户信息，避免造成客户信息被任意角色都可变更的情况。"
              placement="top"
            >
              <i
                style="
                  font-size: 12px;
                  color: #b3b9c7;
                  padding-right: 6px;
                  cursor: pointer;
                "
                class="V7_iconfont V7_iconV7tubiao_bangzhu-42"
              ></i>
            </el-tooltip>
          </p>
          <new-transfer
            filterable
            size="mini"
            :filter-method="filterMethod"
            :titles="['未选', '已选']"
            :button-texts="['删除', '添加']"
            filter-placeholder="请输入"
            v-model="form.repeatProcessingRules.updateScope"
            :data="roleListArr"
          >
          </new-transfer>
        </div>
      </el-form-item>
      <!-- <el-form-item style="width: 700px">
        <span slot="label"
          >客户推送接口
          <el-tooltip
            content="想要推送自定义字段，必须在【系统设置-客户字段】中设置了“字段参数”才可以进行推送"
            placement="top"
          >
            <i
              style="
                font-size: 12px;
                color: #b3b9c7;
                padding-right: 6px;
                cursor: pointer;
              "
              class="V7_iconfont V7_iconV7tubiao_bangzhu-42"
            ></i>
          </el-tooltip>
        </span>
        <el-table
          v-if="form.interfaceList && form.interfaceList.length"
          :data="form.interfaceList"
          max-height="300px"
        >
          <el-table-column label="接口">
            <template slot-scope="{ row }">
              <el-input
                v-if="row.isEdit"
                v-model="row.interface"
                clearable
                @blur="editDone(row)"
              />
              <span v-else>{{ row.interface }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <span class="edit" @click="editInter(scope)">修改</span>
              <span class="del" @click="delInter(scope.$index)">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="interface">
          <el-input
            v-show="addInter"
            clearable
            v-model="addInterFaceCon"
            placeholder="请输入"
            @blur="validateInterCon"
          ></el-input>
          <el-button size="mini" @click="addInterface" type="pramary" plain>
            <i class="el-icon-plus"></i>
            添加客户推送接口
          </el-button>
        </div>
      </el-form-item> -->
    </el-form>
    <el-button type="primary" class="fr" @click="onSubmit" size="mini"
      >保存</el-button
    >
  </div>
</template>

<script lang="ts">
/**
 * 客户基本规则
 */
import { Component, Vue, Ref, Watch } from 'vue-property-decorator'
import { commonAction, deepClone } from '@/utils/common'
import NewTransfer from '@/components/V7transfer/index.vue'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'BasicConfig',
  components: {
    NewTransfer
  }
})
export default class BasicConfig extends Vue {
  [x: string]: any
  @Ref() private readonly formRef: any
  private reg: any = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
  private form: any = {
    customerRepeatRules: ['mobile'],
    contactRepeatRules: ['phone'],
    autoSave: false,
    autoAssign: false,
    // interfaceList: [], // 推送接口
    repeatProcessingRules: {
      isAllUpdate: false,
      updateCustomerInfo: true,
      updateScope: []
    }
  }

  private addInterFaceCon: any = ''

  private addInter: boolean = false

  get roleListArr () {
    const agents = deepClone(CommonModule.publicCache.roleListObj)
    const roleArr: any = []
    for (const i in agents) {
      roleArr.push({ key: agents[i]._id, label: agents[i].name })
    }
    return roleArr
  }

  @Watch('form.autoSave', { immediate: true, deep: true })
  private changeAutoAssign (val: boolean) {
    if (!val && this.form.autoAssign) {
      this.form.autoAssign = false
    }
  }

  private filterMethod (query: any, item: any) {
    return item.label.indexOf(query) > -1
  }

  private addInterface () {
    if (this.form.interfaceList && this.form.interfaceList.length >= 5) {
      return this.$message.error('最多添加5个推送地址')
    }
    this.addInterFaceCon = '' // 清空数据
    this.addInter = true
  }

  private delInter (idx: any) { // 删除
    this.form.interfaceList.splice(idx, 1)
  }

  private editInter (scope: any) { // 修改
    this.$set(scope.row, 'isEdit', true)
  }

  private editDone (row: any) { // 编辑输入框失去焦点
    if (this.reg.test(row.interface)) {
      row.isEdit = false
    } else {
      return this.$message.error('该地址无法推送，请检查是否输入正确')
    }
  }

  private validateInterCon () { // 新增输入框失去焦点校验
    if (!this.addInterFaceCon) {
      return
    }
    if (this.reg.test(this.addInterFaceCon)) {
      this.addInter = false
      this.form.interfaceList.push({
        interface: this.addInterFaceCon,
        isEdit: false
      })
    } else {
      return this.$message.error('该地址无法推送，请检查是否输入正确')
    }
  }

  private onSubmit () {
    this.formRef.validate(async valid => {
      if (valid) {
        const { customerRepeatRules, contactRepeatRules, autoSave, autoAssign, repeatProcessingRules } = this.form
        const sendData = {
          customerRepeatRules,
          contactRepeatRules,
          autoSave,
          autoAssign,
          repeatProcessingRules
        }
        const params = { url: '/server-crm/action/config/customer/basic', method: 'POST', data: sendData }
        const result: any = await commonAction(params)
        if (result.success) {
          this.$message.success('保存成功')
        }
      }
    })
  }

  // 获取配置
  private async getConfig () {
    const params = { url: '/server-crm/action/config/customer/basic', method: 'GET' }
    const result: any = await commonAction(params)
    if (result.success) {
      // result.data.interfaceList = []
      this.form = result.data
    }
  }

  private mounted () {
    this.$getCache('/base/action/general/cache/query', ['roleList'], true)
    this.getConfig()
  }
}
</script>
<style lang="stylus" scoped>
.is-plain
  color $c-main
  border-color $c-main
.BasicConfig
  position relative
  padding 16px
  border-radius 10px
  height 100%
  overflow-y auto
  box-sizing border-box
  margin 0 2px 2px 0
  border 1px solid #ecf0f3
  box-shadow 0px 0px 4px 0px #e0e6f0,0px 1px 4px 0px #e0e6f0
  .edit
    color #008cee
    cursor pointer
    margin-right 16px
  .del
    color #fc6c5c
    cursor pointer
  .interface
    display flex
    align-items center
    margin-top 12px
    .el-input
      margin-right 16px
  >>> .el-table
    font-size 12px
    th > .cell
      display block
</style>
